<template>
  <contents
    :heightInclude="['navBar']"
    class="withdrawal_page"
    backgroundColor="#fff"
  >
    <view class="block"></view>
    <view v-if="step === 1">
      <view class="to">
        <view class="title">提现至</view>
        <view class="info">
          <image class="info_icon" :src="imgObj.logoUrl" />
          <text>{{ imgObj.name }}</text>
        </view>
      </view>
      <view class="to_prc">
        <view class="title">提现金额</view>
        <view class="input_box">
          <view class="unit">￥</view>
          <input
            v-model="form.amount"
            class="input"
            type="number"
            placeholder="0.00"
          />
        </view>
      </view>
      <view class="balance" v-if="form.amount <= walletInfo.aviAmt * 1">
        <text
          >可提现余额￥{{ walletInfo.aviAmt || '0.00' }}，<text
            style="color: #342ead"
            @click="form.amount = walletInfo.aviAmt || 0"
            >全部提现</text
          ></text
        >
      </view>
      <view v-else class="balance" style="color: #ff3b30">
        输入金额已超过可提现余额
      </view>
      <SubmitBtn @click="submit" text="确认提现" />
    </view>

    <view v-if="step === 2">
      <u-form
        :model="form"
        ref="form"
        label-width="165"
        :label-style="{ paddingRight: '15rpx' }"
      >
        <view class="mobile_show">发送至手机号 {{ cardInfo.mobile }}</view>
        <u-form-item label="短信验证码" prop="verificationCode">
          <u-input
            type="number"
            maxlength="6"
            v-model="form.verificationCode"
            placeholder="请输入验证码"
          />
          <SetCode slot="right" :phone="cardInfo.mobile" uniqueKey="bindCard" />
        </u-form-item>
      </u-form>
      <SubmitBtn @click="submit" text="验证信息" />
    </view>

    <view v-if="step === 3">
      <view class="success_img">
        <image
          style="width: 559rpx: height: 300rpx"
          src="@/static/images/success-wallet.png"
        />
        <view>提现申请成功，等待银行处理</view>
        <view style="font-size: 26rpx; color: #888888; margin-top: 20rpx"
          >预计2小时内到账</view
        >
      </view>
      <view class="cell" style="border-bottom: 1px solid #EEEEEE">
        <text style="color: #888888">提现金额</text>
        <text>￥{{ form.amount }}</text>
      </view>
      <view class="cell">
        <text style="color: #888888">提现方式</text>
        <text>{{ imgObj.name }}</text>
      </view>
      <SubmitBtn @click="submit" text="完成" />
    </view>
  </contents>
</template>
<script>
import {
  getMyWalletInfo,
  getBankType,
  doVisAcctBalance,
  doVisTransferOut
} from '@/api/http/wallet'
import SubmitBtn from '@/components/submitBtn'
import SetCode from '@/components/setSmsCode/walletCode'
export default {
  components: {
    SubmitBtn,
    SetCode
  },
  data() {
    return {
      cardInfo: {},
      imgObj: {},
      walletInfo: {},
      form: {
        amount: ''
      },

      step: 1
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    async getData() {
      await getMyWalletInfo().then((res) => {
        if (res.code === 200) {
          this.cardInfo = res.data
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
      doVisAcctBalance().then((res) => {
        if (res.code === 200 && res.data) {
          this.walletInfo = res.data
        }
      })
      getBankType({ acctNo: this.cardInfo.acctNo }).then((res) => {
        if (res.code === 200) {
          this.imgObj = res.data
        }
      })
    },

    async submit() {
      if (this.step === 1) {
        if (this.form.amount === 0 || this.form.amount === '') {
          uni.showToast({
            icon: 'none',
            title: '请确认提现金额'
          })
          return
        }
        if (this.form.amount > this.walletInfo.aviAmt * 1) {
          uni.showToast({
            icon: 'none',
            title: '提现金额不能大于余额'
          })
          return
        }
        this.step = 2
        return
      }

      if (this.step === 2) {
        if (!this.form.verificationCode) {
          uni.showToast({
            icon: 'none',
            title: '请输入验证码'
          })
          return
        }
        const res = await doVisTransferOut()
        if (res.code === 200) {
          this.step = 3
          return
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      }

      if (this.step === 3) {
        uni.navigateBack()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.withdrawal_page {
  .block {
    border-bottom: 1px solid #f2f2f2;
  }
  .to {
    margin: 0 30rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
    height: 102rpx;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .info {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #555555;
      .info_icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 15rpx;
      }
    }
  }
  .to_prc {
    margin: 0 30rpx;
    border-bottom: 1px solid #f2f2f2;
    .title {
      line-height: 100rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .input_box {
      display: flex;
      align-items: center;
      height: 100rpx;
      .unit {
        font-size: 56rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
      }
      .input {
        height: 100rpx;
        font-size: 56rpx;
        margin-left: 20rpx;
      }
    }
  }

  .balance {
    line-height: 100rpx;
    padding-left: 35rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #888888;
  }

  .u-form {
    padding: 0 30rpx;
    background-color: #fff;
  }

  .mobile_show {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #777777;
    margin: 30rpx 0;
  }

  .success_img {
    margin-top: 92rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
  }

  .cell {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    margin: 0 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #222222;
  }
}
</style>